<template>
  <div id="" class="morefilter">
    <div class="moreDiv" v-if="rentType==1">
      <p>方式</p>
      <div class="">
        <span v-for="(houseState,index) in houseState" :key="houseState.key"
          :class="{'active':stateIdx==index}"
          @click="setStateActive(index)">
          {{houseState.value}}
        </span>
      </div>
    </div>
    <div class="moreDiv">
      <p>朝向</p>
      <div class="">
        <span v-for="(houseToward,index) in houseToward" :key="houseToward.key"
          :class="{'active':towardIdx==index}"
          @click="setTowardActive(index)">
          {{houseToward.towardName}}
        </span>
      </div>
    </div>
    <div class="moreDiv">
      <p>面积</p>
      <div class="">
        <span v-for="(houseArea,index) in houseArea" :key="houseArea.key"
        :class="{'active':areaIdx==index}"
        @click="setAreaActive(index)">{{houseArea.text}}</span>
      </div>
    </div>

    <div class="morefilterBtn">
      <button type="button" name="clear" class="clearBtn" @click="cancelFilter">清除</button>
      <button type="button" name="sure" class="sureBtn" @click="sureFilter">确定</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: ['rentType'],
  data: () => ({
    houseState:[{
      value:'整租',
      state:1
    },{
      value:'转租',
      state:4
    }],
    houseToward:[],   //朝向
    houseArea:[],     //面积
    stateIdx:0,
    towardIdx:0,
    areaIdx:0,
  }),
  methods: {
    setStateActive(index) {
      this.stateIdx = index;
    },
    setTowardActive(index) {
      this.towardIdx = index;
    },
    setAreaActive(index) {
      this.areaIdx = index;
    },
    getToward(callback){
      network.get(configUrl.HOUSETOWARD_URL,'',function(res){
        console.log(res);
        callback(res.dataList);
      },function(err){
        console.log(err);
      });
    },
    // 清除
    cancelFilter() {
      this.stateIdx = this.houseState.length + 1;
      this.towardIdx = this.houseToward.length + 1;
      this.areaIdx = this.houseArea.length + 1;
      var houseState = '';
      var houseToward = '';
      var houseArea = '';
      this.$emit('moreFilterEvent',{
        houseState:houseState,
        houseToward:houseToward,
        houseArea:houseArea
      })
    },
    // 确定
    sureFilter() {
      var houseState = this.houseState[this.stateIdx];
      var houseToward = this.houseToward[this.towardIdx];
      var houseArea = this.houseArea[this.areaIdx];
      this.$emit('moreFilterEvent',{
        houseState:houseState,
        houseToward:houseToward,
        houseArea:houseArea
      })
    },
  },
  mounted() {
    //do something after mounting vue instance
    var that = this;
    that.getToward(function(dataList){
      that.houseToward = dataList;
    });

    var houseArea = [{
      text:'30平以下',
      houseAreaStart:0, //最低面积
      houseAreaEnd:30,  //最高面积
    },{
      text:'30-50',
      houseAreaStart:30, //最低面积
      houseAreaEnd:50,  //最高面积
    },{
      text:'50-70',
      houseAreaStart:50, //最低面积
      houseAreaEnd:70,  //最高面积
    },{
      text:'70-90',
      houseAreaStart:70, //最低面积
      houseAreaEnd:90,  //最高面积
    },{
      text:'90-110',
      houseAreaStart:90, //最低面积
      houseAreaEnd:110,  //最高面积
    },{
      text:'110以上',
      houseAreaStart:110, //最低面积
      houseAreaEnd:'',  //最高面积
    }];
    that.houseArea = houseArea;
  }
}
</script>
<style lang="scss" scoped>

.morefilter{
  background: white;
  height: 100%;
  position:relative;
}
.moreDiv{
  border-bottom: 1px solid $borderColor;
  margin-left: 20px;
  padding:20px 0;
  p{
    font-size: 18px;
    color: $blackColor;
  }
  div{
    @include flex;
    flex-wrap: wrap;
    span{
      width: 30%;
      margin-right: 2%;
      margin-top: 10px;
      border:1px solid $borderColor;
      text-align: center;
      height: 30px;
      line-height: 30px;
      &.active{
        background: $greenColor;
        color: white;
      }
    }
  }
}
.morefilterBtn{
  @include flex;
  position:absolute;
  bottom: 0;
  left:0;
  width:100%;
  z-index:2;
  button{
  border:none;
  outline:none;
  &.clearBtn{
    background:grayColor;
    flex:1;
  }
  &.sureBtn{
    background:$greenColor;
    color:white;
    flex:2;
  }
  }
}</style>
